<template>
  <a-row class="login">
    <a-col :span="8" :offset="8" class="login-main">
      <h1 style="text-align: center"><rocket-two-tone />&nbsp;12306售票系统</h1>
      <a-form
          :model="loginForm"
          name="basic"
          autocomplete="off"
      >
        <a-form-item
            label=""
            name="mobile"
            :rules="[{ required: true, message: '请输入手机号!' }]"
        >
          <a-input placeholder="请输入手机号" v-model:value="loginForm.mobile" />
        </a-form-item>

        <a-form-item
            label=""
            name="code"
            :rules="[{ required: true, message: '请输入验证码!' }]"
        >
          <a-input placeholder="请输入验证码" v-model:value="loginForm.code">
            <template #addonAfter>
              <a-button class="sendButton" type="link" :disabled="isSend" @click="sendCode">{{ codeName }}</a-button>
            </template>
          </a-input>
          <!--<a-input v-model:value="loginForm.code" placeholder="验证码"/>-->
        </a-form-item>

        <a-form-item>
          <a-button type="primary" block @click="login">登录</a-button>
        </a-form-item>

      </a-form>
      <h5 style="color: darkgray">Created by Guessed</h5>
    </a-col>
  </a-row>
</template>

<script>
import { defineComponent, reactive,ref } from 'vue';
import axios from 'axios';
import { notification } from 'ant-design-vue';
import { useRouter } from 'vue-router'
import store from "@/store";

export default defineComponent({
  name: "login-view",
  setup() {
    const isSend = ref(false);
    const codeName = ref("获取验证码");
    const totalTime = ref(30);//一般是60
    var timer =  "";//定时器

    const router = useRouter();

    const loginForm = reactive({
      mobile: '13000000000',
      code: '',
    });

    const sendCode = () => {
      axios.post("/member/member/send-code", {
        mobile: loginForm.mobile
      }).then(response => {
        let data = response.data;
        if (data.success) {
          notification.success({ description: '发送验证码成功！' });
          //倒计时
          countDown();
        } else {
          notification.error({ description: data.message });
        }
      });
    };

    const login = () => {
      axios.post("/member/member/login", loginForm).then((response) => {
        let data = response.data;
        if (data.success) {
          notification.success({ description: '登录成功！' });
          // 登录成功，跳到控台主页
          router.push("/welcome");
          store.commit("setMember", data.content);
          console.log("token",data.content.token)
        } else {
          notification.error({ description: data.message });
        }
      })
    };

    // 验证码倒计时
    const countDown=() => {
      if (isSend.value) return;
      isSend.value = true;
      codeName.value = totalTime.value + "s后重新发送";

      //   倒计时
      timer = setInterval(() => {
        totalTime.value--;
        codeName.value = totalTime.value + "s后重新发送";
        if (totalTime.value < 0) {
          clearInterval(timer);
          codeName.value = "重新发送验证码";
          totalTime.value = 30;
          isSend.value = false;
        }
      }, 1000);
    }


    return {
      loginForm,
      sendCode,
      login,
      isSend,
      codeName
    };
  },
});
</script>

<style>
.login-main h1 {
  font-size: 25px;
  font-weight: bold;
}
.login-main {
  margin-top: 100px;
  padding: 30px 30px 20px;
  border: 2px solid grey;
  border-radius: 10px;
  background-color: #fcfcfc;
}
.sendButton{
  display: contents;
}
</style>

